
.channel {
  .channel-header {
    .flexbox();
    width: 100%;
    height: (40/@font-size-base)*1rem;
    box-sizing: border-box;
    padding: 0 (15/@font-size-base)*1rem;
    .justify-content(space-between);
    .align-items(center);
    span {
      font-size: (14/@font-size-base)*1rem;
      color: #5C5767;
    }

    em {
      font-style: normal;
      font-size: (12/@font-size-base)*1rem;
      color: #8D8A97;
    }
  }

  .channel-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 10px;
    .hairline(bottom, #ddd);
  }

  .channel-item {
    position: absolute;
    .flexbox();
    .justify-content(center);
    .align-items(center);
    float: left;
    width: (81.25/@font-size-base)*1rem;
    height: (35/@font-size-base)*1rem;
    background: @white;
    margin-bottom: (10/@font-size-base)*1rem;
    margin-left: (10/@font-size-base)*1rem;
    font-size: (13/@font-size-base)*1rem;
    color: #5C5767;
    transition: top .4s ease-in-out, left .4s ease-in-out;
    a {
      position: absolute;
      top: 0;
      right: (5/@font-size-base)*1rem;
      bottom: auto;
      left: auto;
      color: #5C5767;
      font-size: (16/@font-size-base)*1rem;
      line-height: (16/@font-size-base)*1rem;
    }
  }
}